
<template><!-- //相当于隐藏的div -->
<div style="display: flex;justify-content: space-between">
<h2>课程显示</h2>
        <h2><button @click="go2add()">添加课程</button></h2>
    </div>
    <div style="display: flex">
        <div style="width: 67%;border: blue 1px solid">
            <h2 style="text-align: center">课程显示</h2>
            <table border="1" style="width: 100%">
                <tr>
                    <th>课程编号</th>
                    <th>课程名称</th>
                    <th>操作</th>
                </tr>
                <tr v-for="x,idx in courses" @click="go2update(x)"  :class="{c:course.cno==x.cno}">
                    <th>{{x.cno}}</th>
                    <th>{{x.cname}}</th>
                    <th><button @click="del(x.cno)">删除</button></th>
                </tr>
            </table>
			{{dodel}}
        </div>
        <div style="width: 32%; border: green 1px solid">
            课程编号：<input type="text" v-model="course.cno" v-show="actidx==1">
            <input type="text" v-model="course.cno" v-show="actidx==0" readonly><br><hr>
            课程名称：<input type="text" v-model="course.cname"><br><hr>
            <button @click="addupdate()" >添加/修改</button>
        </div>
    </div>
</template>


<script>
	export default{
		name:"Course",
		data(){
			return{
				courses:[],
				course:{cno:"",cname:""},
				actidx:0,
				token:"",
				dodel:""
			}
		},
		methods:{
			del(cno){
				var that=this
				this.$axios.get(this.$ip+"/api/adm/course/del?cno="+cno,{headers:{'Authorization':this.token}}).then(function(resp){
					that.courses=resp.data.data
					console.log(resp.data.data)
				})
			},
			go2add(){
				this.actidx=1
				this.course={cno:"",cname:""}
			},
			go2update(course){
				this.actidx=0
				var that=this
				this.$axios.get(this.$ip+"/api/adm/course/findOne/"+course.cno,{headers:{'Authorization':this.token}}).then(function(resp){
					that.course=resp.data.data
					console.log(resp.data.data)
				})
			},
			addupdate(){
				if(this.course.cno==undefined||this.course.cname==undefined){
					alert("添加不允许为空")
					return;
				}
				var that=this;
				var fd=new FormData()
				fd.append("cno",this.course.cno)
				fd.append("cname",this.course.cname)
				var p=""
				if(that.actidx>0)p=this.$ip+"/api/adm/course/add"
				if(that.actidx==0)p=this.$ip+"/api/adm/course/update"
				this.$axios.post(p,that.course,{headers:{'Authorization':that.token}}).then(function(resp){
					that.courses=resp.data.data
					that.dodel=resp.data.msg
					console.log(resp.data.data)
				})
			}
			
		},
		mounted() {
			this.token=window.localStorage.getItem("token")
			console.log(this.token)
			var that=this;
			console.log(this.$ip)
			this.$axios.get(this.$ip+"/api/public/getCourses").then(function(resp){
				that.courses=resp.data.data
				console.log(resp.data.data)
			})
		}
	}
</script>

<style>
	/* //设置高亮 */
	       .c {
	           color: red;
	           background: orange;
	       }
</style>
